<!--
 * @Author: susu 1628469970@qq.com
 * @Date: 2023-08-13 12:25:49
 * @LastEditors: susu 1628469970@qq.com
 * @LastEditTime: 2023-08-13 17:33:05
 * @FilePath: \css_demos\web\css3动画\椭圆绕圈\3d银河系动画.htm
 * @Description: 参考链接：http://www.bootstrapmb.com/item/4361
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./style.css">

<body class="data-close controls-close set-speed zoom-large view-3D">
    <div id="navbar"><a id="toggle-data" href="#data"><i class="icon-data"></i>Data</a><a id="toggle-controls"
            href="#controls"><i class="icon-controls"></i>Controls</a></div>
    <div id="data"><a class="sun" title="sun" href="#sunspeed">Sun</a><a class="mercury" title="mercury"
            href="#mercuryspeed">Mercury</a><a class="venus" title="venus" href="#venusspeed">Venus</a><a class="earth"
            title="earth" href="#earthspeed">Earth</a><a class="mars" title="mars" href="#marsspeed">Mars</a><a
            class="jupiter" title="jupiter" href="#jupiterspeed">Jupiter</a><a class="saturn active" title="saturn"
            href="#saturnspeed">Saturn</a><a class="uranus" title="uranus" href="#uranusspeed">Uranus</a><a
            class="neptune" title="neptune" href="#neptunespeed">Neptune</a></div>
    <div id="controls"><label class="set-view"><input type="checkbox"></label><label class="set-zoom"><input
                type="checkbox"></label><label><input type="radio" class="set-speed" name="scale"
                checked=""><span>Speed</span></label><label><input type="radio" class="set-size"
                name="scale"><span>Size</span></label><label><input type="radio" class="set-distance"
                name="scale"><span>Distance</span></label></div>
    <div id="universe" class="scale-stretched set-speed">
        <div id="galaxy">
            <div id="solar-system" class="saturn">
                <div id="mercury" class="orbit">
                    <div class="pos">
                        <div class="planet">
                            <dl class="infos">
                                <dt>Mercury</dt>
                                <dd><span></span></dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div id="venus" class="orbit">
                    <div class="pos">
                        <div class="planet">
                            <dl class="infos">
                                <dt>Venus</dt>
                                <dd><span></span></dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div id="earth" class="orbit">
                    <div class="pos">
                        <div class="orbit">
                            <div class="pos">
                                <div class="moon"></div>
                            </div>
                        </div>
                        <div class="planet">
                            <dl class="infos">
                                <dt>Earth</dt>
                                <dd><span></span></dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div id="mars" class="orbit">
                    <div class="pos">
                        <div class="planet">
                            <dl class="infos">
                                <dt>Mars</dt>
                                <dd><span></span></dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div id="jupiter" class="orbit">
                    <div class="pos">
                        <div class="planet">
                            <dl class="infos">
                                <dt>Jupiter</dt>
                                <dd><span></span></dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div id="saturn" class="orbit">
                    <div class="pos">
                        <div class="planet">
                            <div class="ring"></div>
                            <dl class="infos">
                                <dt>Saturn</dt>
                                <dd><span></span></dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div id="uranus" class="orbit">
                    <div class="pos">
                        <div class="planet">
                            <dl class="infos">
                                <dt>Uranus</dt>
                                <dd><span></span></dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div id="neptune" class="orbit">
                    <div class="pos">
                        <div class="planet">
                            <dl class="infos">
                                <dt>Neptune</dt>
                                <dd><span></span></dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div id="sun">
                    <dl class="infos">
                        <dt>Sun</dt>
                        <dd><span></span></dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <script src="./jq.js"></script>
    <script src="./script.js"></script>
    <!-- <script src="HTTP://CDN.BOOTSTRAPMB.COM/CONSOLE-ban.min.js"></script> -->
</body>

</html>